<%@ include file="/common.jsp" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>物品管理</title>
</head>
<body>

<div class="container mt-5">

    <table class="table">
        <thead>
        <tr>
            <th>物品编号</th>
            <th>仓库编号</th>
            <th>物品名称</th>
            <th>物品位置</th>
            <th>物品尺寸</th>
            <th>物品类型</th>
            <th>物品数量</th>
            <th>物品价格</th>
            <th>交货时间</th>
        </tr>
        </thead>
        <tbody id="itemTableBody">
        <!-- 表格内容将动态填充 -->
        </tbody>
    </table>

    <!-- 分页 -->
    <div class="d-flex justify-content-between">
        <button class="btn btn-secondary" id="prevPageBtn">&lt; 上一页</button>
        <button class="btn btn-secondary" id="nextPageBtn">下一页 &gt;</button>
    </div>
</div>

<!-- 添加物品模态框 -->
<div class="modal fade" id="addItemModal" tabindex="-1" role="dialog" aria-labelledby="addItemModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addItemModalLabel">添加物品</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 添加物品表单 -->
                <form id="addItemForm">
                    <div class="form-group">
                        <label for="itemNumber">物品编号</label>
                        <input type="text" class="form-control" id="itemNumber" name="itemNumber">
                    </div>
                    <div class="form-group">
                        <label for="warehouseNumber">仓库编号</label>
                        <select class="form-control" id="warehouseNumber" name="warehouseNumber">
                            <!-- 仓库编号将动态填充 -->
                        </select>
                    </div>
                    <input type="hidden" id="itemPosition" name="itemPosition">
                    <div class="form-group">
                        <label for="itemName">物品名称</label>
                        <input type="text" class="form-control" id="itemName" name="itemName">
                    </div>
                    <div class="form-group">
                        <label for="itemSize">物品尺寸</label>
                        <input type="text" class="form-control" id="itemSize" name="itemSize">
                    </div>
                    <div class="form-group">
                        <label for="itemType">物品类型</label>
                        <input type="text" class="form-control" id="itemType" name="itemType">
                    </div>
                    <div class="form-group">
                        <label for="itemQuantity">物品数量</label>
                        <input type="text" class="form-control" id="itemQuantity" name="itemQuantity">
                    </div>
                    <div class="form-group">
                        <label for="itemPrice">物品价格</label>
                        <input type="text" class="form-control" id="itemPrice" name="itemPrice">
                    </div>
                    <div class="form-group" style="display: none">
                        <label for="itemDeliveryTime">交货时间</label>
                        <input type="text" class="form-control" id="itemDeliveryTime" name="itemDeliveryTime">
                    </div>
                    <button type="submit" class="btn btn-primary">添加</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 编辑物品模态框 -->
<div class="modal fade" id="editItemModal" tabindex="-1" role="dialog" aria-labelledby="editItemModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editItemModalLabel">编辑物品</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 编辑物品表单 -->
                <form id="editItemForm">
                    <input type="hidden" id="editItemNumber" name="itemNumber">
                    <div class="form-group">
                        <label for="editWarehouseNumber">仓库编号</label>
                        <select class="form-control" id="editWarehouseNumber" name="warehouseNumber">
                            <!-- 仓库编号将动态填充 -->
                        </select>
                    </div>
                    <input type="hidden" id="editItemPosition" name="itemPosition">
                    <div class="form-group">
                        <label for="editItemName">物品名称</label>
                        <input type="text" class="form-control" id="editItemName" name="itemName">
                    </div>
                    <div class="form-group">
                        <label for="editItemSize">物品尺寸</label>
                        <input type="text" class="form-control" id="editItemSize" name="itemSize">
                    </div>
                    <div class="form-group">
                        <label for="editItemType">物品类型</label>
                        <input type="text" class="form-control" id="editItemType" name="itemType">
                    </div>
                    <div class="form-group">
                        <label for="editItemQuantity">物品数量</label>
                        <input type="text" class="form-control" id="editItemQuantity" name="itemQuantity">
                    </div>
                    <div class="form-group">
                        <label for="editItemPrice">物品价格</label>
                        <input type="text" class="form-control" id="editItemPrice" name="itemPrice">
                    </div>
                    <div class="form-group" style="display: none">
                        <label for="editItemDeliveryTime">交货时间</label>
                        <input type="text" class="form-control" id="editItemDeliveryTime" name="itemDeliveryTime">
                    </div>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 自定义JS -->
<script>
    var warehouseData = {};

    // 加载仓库数据并填充到下拉列表
    function loadWarehouseData() {
        $.ajax({
            url: "${pageContext.request.contextPath}/warehouse?operation=getAllWarehouses",
            type: "GET",
            dataType: "json",
            success: function (data) {
                $.each(data.data, function (index, warehouse) {
                    warehouseData[warehouse.warehouseNumber] = warehouse.warehouseLocation;
                    $("#warehouseNumber, #editWarehouseNumber").append(
                        "<option value='" + warehouse.warehouseNumber + "'>" + warehouse.warehouseName + " (" + warehouse.warehouseNumber + ")</option>"
                    );
                });
            },
            error: function () {
                alert("获取仓库数据时出错！");
            }
        });
    }

    // 加载物品数据的函数
    function loadItemData(start, pageSize) {
        $.ajax({
            url: "${pageContext.request.contextPath}/item?operation=getItemsByPage&start=" + start + "&pageSize=" + pageSize,
            type: "GET",
            dataType: "json",
            success: function (data) {
                // 清空表格内容
                $("#itemTableBody").empty();
                // 填充表格数据
                $.each(data.data, function (index, item) {
                    var deliveryTime = new Date(item.itemDeliveryTime).toLocaleString();
                    $("#itemTableBody").append(
                        "<tr data-id='" + item.itemNumber + "'>" +
                        "<td>" + item.itemNumber + "</td>" +
                        "<td>" + item.warehouseNumber + "</td>" +
                        "<td>" + item.itemName + "</td>" +
                        "<td>" + item.itemPosition + "</td>" +
                        "<td>" + item.itemSize + "</td>" +
                        "<td>" + item.itemType + "</td>" +
                        "<td>" + item.itemQuantity + "</td>" +
                        "<td>" + item.itemPrice + "</td>" +
                        "<td>" + deliveryTime + "</td>" +
                        "</tr>"
                    );
                });
            },
            error: function () {
                alert("获取数据时出错！");
            }
        });
    }


    // 填充编辑模态框的函数
    function populateEditModal(itemNumber) {
        // 获取物品数据
        var row = $("tr[data-id='" + itemNumber + "']");
        var warehouseNumber = row.find("td:eq(1)").text();
        var itemName = row.find("td:eq(2)").text();
        var itemPosition = row.find("td:eq(3)").text();
        var itemSize = row.find("td:eq(4)").text();
        var itemType = row.find("td:eq(5)").text();
        var itemQuantity = row.find("td:eq(6)").text();
        var itemPrice = row.find("td:eq(7)").text();
        var itemDeliveryTime = new Date(row.find("td:eq(8)").text()).toISOString().slice(0, 16);

        // 填充模态框数据
        $("#editItemNumber").val(itemNumber);
        $("#editWarehouseNumber").val(warehouseNumber);
        $("#editItemPosition").val(itemPosition);
        $("#editItemName").val(itemName);
        $("#editItemSize").val(itemSize);
        $("#editItemType").val(itemType);
        $("#editItemQuantity").val(itemQuantity);
        $("#editItemPrice").val(itemPrice);
        $("#editItemDeliveryTime").val(itemDeliveryTime);
    }

    // 提交添加物品表单的函数
    $("#addItemForm").submit(function (event) {
        event.preventDefault();
        var selectedWarehouseNumber = $("#warehouseNumber").val();
        $("#itemPosition").val(warehouseData[selectedWarehouseNumber]);
        var currentTimeStamp = new Date().getTime();
        $(this).append("<input type='hidden' name='itemDeliveryTime' value='" + currentTimeStamp + "'>");
        $.ajax({
            url: "${pageContext.request.contextPath}/item?operation=addItem",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                // 添加成功后重新加载数据
                loadItemData(1, 5); // 假设每页5条数据
                // 关闭模态框
                $("#addItemModal").modal("hide");
                // 显示成功信息
                alert("物品添加成功！");
            },
            error: function () {
                alert("添加物品时出错！");
            }
        });
    });

    // 提交编辑物品表单的函数
    $("#editItemForm").submit(function (event) {
        event.preventDefault();
        var selectedWarehouseNumber = $("#editWarehouseNumber").val();
        $("#editItemPosition").val(warehouseData[selectedWarehouseNumber]);
        var currentTimeStamp = new Date().getTime();
        $(this).append("<input type='hidden' name='itemDeliveryTime' value='" + currentTimeStamp + "'>");
        $.ajax({
            url: "${pageContext.request.contextPath}/item?operation=updateItem",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                // 更新成功后重新加载数据
                loadItemData(1, 5); // 更新后重新加载第一页数据
                // 关闭模态框
                $("#editItemModal").modal("hide");
                // 显示成功信息
                alert("物品更新成功！");
            },
            error: function () {
                alert("更新物品时出错！");
            }
        });
    });


    // 处理编辑按钮点击的函数
    function editItem(itemNumber) {
        populateEditModal(itemNumber);
        $("#editItemModal").modal("show");
    }

    // 删除物品的函数
    function deleteItem(itemNumber) {
        if (confirm("确定要删除这个物品吗？")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/item?operation=deleteItem",
                type: "POST",
                data: {itemNumber: itemNumber},
                dataType: "json",
                success: function (data) {
                    // 删除成功后重新加载数据
                    loadItemData(1, 5); // 删除后重新加载第一页数据
                    // 显示成功信息
                    alert("物品删除成功！");
                },
                error: function () {
                    alert("删除物品时出错！");
                }
            });
        }
    }

    // 处理分页的函数
    $("#prevPageBtn").click(function () {
        // 获取当前页码
        var currentPage = parseInt($("#prevPageBtn").data("currentPage"));
        if (currentPage > 1) {
            // 加载上一页数据
            loadItemData(currentPage - 1, 5); // 假设每页5条数据
            $("#prevPageBtn").data("currentPage", currentPage - 1); // 更新当前页码
            $("#nextPageBtn").data("currentPage", currentPage - 1); // 更新下一页按钮的当前页码
        }
    });

    $("#nextPageBtn").click(function () {
        // 获取当前页码
        var currentPage = parseInt($("#nextPageBtn").data("currentPage"));
        // 加载下一页数据
        loadItemData(currentPage + 1, 5); // 假设每页5条数据
        $("#prevPageBtn").data("currentPage", currentPage + 1); // 更新上一页按钮的当前页码
        $("#nextPageBtn").data("currentPage", currentPage + 1); // 更新当前页码
    });

    $(document).ready(function () {
        // 页面加载时加载第一页物品数据和仓库数据
        loadItemData(1, 5); // 假设每页5条数据
        loadWarehouseData();
        // 设置分页按钮的初始页码
        $("#prevPageBtn").data("currentPage", 1);
        $("#nextPageBtn").data("currentPage", 1);
    });

    // 手动移除模态框隐藏时的背景遮罩，防止黑色阴影
    $('#addItemModal, #editItemModal').on('hidden.bs.modal', function () {
        $('.modal-backdrop').remove();
    });
</script>

</body>
</html>
